<template>
  <div class="student-list">
    <h3>学生列表</h3>
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'StudentList',
  props: {
    students: {
      type: Array,
      default: () => [
        { id: "001", name: "张三", gender: "男", age: 20 },
        { id: "002", name: "李四", gender: "女", age: 19 },
        { id: "003", name: "王五", gender: "男", age: 21 }
      ]
    }
  }
}
</script>

<style scoped>
/* table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: center;
}
th {
  background-color: #f5f5f5;
} */
</style>